<template>
    <div>
        <div>
            <h3 style="margin-left:20px">发布新产品</h3>
        </div>
        <el-form style="width:70%" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="版本号" prop="version">
                <el-input class="taskAdd-row-title" placeholder="请输入内容" size="medium" v-model="ruleForm.version" clearable></el-input>
            </el-form-item>
            <el-form-item label='简介'>
                <el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="ruleForm.content"></el-input>
            </el-form-item>
            <!-- <el-form-item label="是否审批">
                <el-switch v-model="switchType" @change="switchClick" active-color="#13ce66" inactive-color="#ff4949">
                </el-switch>
            </el-form-item> -->
            <!-- <el-form-item label="关联流程" v-if="switchType == true">
                <el-select style="width:520px" v-model="processName" filterable :filter-method="remoteMethodProcess" clearable placeholder="请选择流程" value-key="id" @change="processClick">
                    <el-option v-for="item in process" :key="item.id" :label="item.name" :value="item"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="关联表单">
                <el-select style="width:520px" v-model="manageName" filterable :filter-method="remoteMethodManage" clearable placeholder="请选择流程" value-key="formKey" @change="manageClick">
                    <el-option v-for="item in manage" :key="item.formKey" :label="item.formName" :value="item">
                    </el-option>
                </el-select>
            </el-form-item> -->
            <parser v-if="formData" :value="valueForm" :form-conf="formData" ref="parser" @submit="submit" />
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">立即修改</el-button>
                <el-button @click="resetForm">取消</el-button>
            </el-form-item>
        </el-form>

    </div>
</template>
<script>
import Parser from "@/components/FormGenerator/components/parser";
import { deleteAction, getAction, postAction, putAction } from "@/api/manage";
import { queryById, update } from "@/api/prodVer";
export default {
    name: "produceReleaseedit",
    components: {
        Parser,
    },
    data() {
        return {
            valueForm: "",
            formData: "", //表单数据
            switchType: true,
            manageName: "", //表单名称
            manage: [],
            processName: "", //流程名称
            process: [],
            ruleForm: {
                version: "",
                content: "",
                status: "00",
                prodId: "",
                verId: "",
            },
            rules: {
                version: [
                    {
                        required: true,
                        message: "请输入活动名称",
                        trigger: "blur",
                    },
                ],
                masterUserId: [
                    {
                        required: true,
                        message: "请选择负责人",
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    created() {
        this.processList();
        this.manageList();
        var queryData = JSON.parse(this.$route.query.data);
        this.ruleForm.verId = queryData.verId;
        this.queryClick();
    },
    methods: {
        queryClick() {
            var _this = this;
            console.log("4564646");
            console.log(this.ruleForm.verId);
            queryById({ id: this.ruleForm.verId }, false).then((res) => {
                console.log(res);
                _this.ruleForm = res.data;
                _this.processName = res.data.modelName;
                _this.manageName = res.data.fromName;
                // if(_this.docForm.docType == '05'){
                // 	_this.switchType = true
                // }else if(docForm.modelId){
                // 	_this.switchType = true
                // }
                if (res.data.formKey) {
                    getAction(
                        "/flowable/form/queryById",
                        {
                            id: res.data.formKey,
                        },
                        false
                    ).then(({ data }) => {
                        if (data.formJson) {
                            _this.formData = JSON.parse(data.formJson);
                        }
                        if (res.data.formData) {
                            _this.valueForm = JSON.parse(res.data.formData);
                        }
                    });
                }
            });
        },
        submit(data) {
            var _this = this;
            this.ruleForm.formData = JSON.stringify(data);
            update(this.ruleForm).then((res) => {
                var queryData = JSON.parse(this.$route.query.data);
                this.$store
                    .dispatch("tagsView/delView", _this.$route)
                    .then(({ visitedViews }) => {
                        this.$router.push({
                            path: "/produce/details",
                            query: { prodId: queryData.prodId },
                        });
                    }); // 关闭当前tab回到列表
            });
        },
        processList(val) {
            var _this = this;
            var name = "";
            if (val) {
                name = val;
            } else {
                name: "";
            }
            getAction("/flowable/processDefinition/listMyself", {
                processDefinitionName: name,
            }).then((res) => {
                const { data } = res;
                this.process = data.records;
            });
        },
        switchClick(data) {
            if (data == false) {
                this.processName = "";
                this.ruleForm.modelId = "";
            }
        },
        remoteMethodProcess(data) {
            if (this.timer) {
                clearTimeout(this.timer);
            }
            this.timer = setTimeout(() => {
                this.processList(data);
            }, 500);
        },
        processClick(data) {
            console.log(data);
            this.processName = data.name;
            this.ruleForm.modelId = data.id;
        },
        manageList(val) {
            var _this = this;
            var name = "";
            if (val) {
                name = val;
            } else {
                name = "";
            }
            getAction("/flowable/form/list", {
                formName: name,
                current: 1,
                size: 10,
            }).then((res) => {
                const { data } = res;
                this.manage = data.records;
            });
        },
        remoteMethodManage(data) {
            if (this.timer) {
                clearTimeout(this.timer);
            }
            this.timer = setTimeout(() => {
                this.manageList(data);
            }, 500);
        },
        manageClick(data) {
            console.log(data);
            var _this = this;
            this.manageName = data.formName;
            this.ruleForm.formKey = data.formKey;
            this.formData = data.formJson;
            if (data.formKey) {
                getAction("/flowable/form/queryById", {
                    id: data.formKey,
                }).then(({ data }) => {
                    if (data.formJson) {
                        _this.formData = JSON.parse(data.formJson);
                    }
                });
            }
        },
        dirparenIdtchange(data) {
            this.ruleForm.dirId = data;
        },
        selectsuccess(data) {
            this.ruleForm.masterUserId = data[0].userId;
        },
        resetForm() {
            this.$emit("resetForm", "warehouse", "代码仓库");
        },
        submitForm() {
            this.$refs.parser.submitForm();
            // save(this.ruleForm).then(res=>{
            //     this.$emit('resetForm','release')
            //  })
        },
        resetForm() {
            // this.$emit('resetForm','release')
        },
    },
};
</script>
 <style scoped>
.avatar {
    border-radius: 50%;
    width: 30px;
}
.milepostselect {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    justify-content: space-between;
}
.milepostselect_div {
    display: flex;
    align-items: center;
}
.milepstdate {
    display: flex;
    width: 100%;
}
</style>
